import React from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';//导入的方式跟之前有点变化
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
import WorkerInformation from './WorkerInformation';
import leaderInformation from './leaderInformation';
import TeamInformation from './TeamInformation';
import Title from './title/Title';

const { Header, Content, Footer, Sider } = Layout;

const Entrance = ({match}) => {
    this.state = {
        collapsed: false,
    };
    this.onCollapse = (collapsed) => {
        console.log(collapsed);
        this.setState({ collapsed });

    };
        return (
            <Router>
                <Layout style={{ minHeight: '100vh' }}>
                    <Sider
                        collapsible
                        collapsed={this.state.collapsed}
                        onCollapse={this.onCollapse}
                    >
                        <div className="logo" />
                        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
                            <Menu.Item key="1">
                                <Link to={`${match.url}/WorkerInformation`}>
                                    <Icon type="pie-chart" />
                                    <span>工人登记信息</span>
                                </Link>
                            </Menu.Item>
                            <Menu.Item key="2">
                                <Link to={`${match.url}/leaderInformation`}>
                                    <Icon type="desktop" />
                                    <span>组长登记信息</span>
                                </Link>
                            </Menu.Item>
                            <Menu.Item key="3">
                                <Link to={`${match.url}/TeamInformation`}>
                                    <Icon type="desktop" />
                                    <span>分包队伍承包人登记信息</span>
                                </Link>
                            </Menu.Item>
                        </Menu>
                    </Sider>
                    <Layout>
                        <Header style={{ background: '#fff', padding: 0 }} >
                            <Title />
                        </Header>
                        <Content style={{ margin: '0 16px' }}>
                            <Breadcrumb style={{ margin: '16px 0' }}>
                                <Breadcrumb.Item>User</Breadcrumb.Item>
                                <Breadcrumb.Item>Bill</Breadcrumb.Item>
                            </Breadcrumb>
                            <Route exact path={`${match.url}/WorkerInformation`} component={WorkerInformation}/>
                            <Route path={`${match.url}/leaderInformation`} component={leaderInformation}/>
                            <Route path={`${match.url}/TeamInformation`} component={TeamInformation}/>
                        </Content>
                        <Footer style={{ textAlign: 'center' }}>
                            Ant Design ©2016 Created by Ant UED
                        </Footer>
                    </Layout>
                </Layout>
            </Router>
        );
};

export default Entrance;